<!DOCTYPE html>
<html>
<head>
    <title>Specific Latent Heat of Fusion of Ice Experiment</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="520"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.lineWidth = 1.5;
        ctx.font = '16px Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Helper Functions ---

        function drawLabel(text, x, y, targetX, targetY) {
            ctx.textAlign = 'left';
            ctx.fillText(text, x, y);
            ctx.beginPath();
            ctx.moveTo(x + ctx.measureText(text).width + 5, y);
            ctx.lineTo(targetX, targetY);
            ctx.stroke();
        }
        
        function drawLabelRight(text, x, y, targetX, targetY) {
            ctx.textAlign = 'right';
            ctx.fillText(text, x, y);
            ctx.beginPath();
            ctx.moveTo(x - ctx.measureText(text).width - 5, y);
            ctx.lineTo(targetX, targetY);
            ctx.stroke();
        }

        function drawCircleInstrument(x, y, radius, label) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.stroke();
            ctx.fillText(label, x, y);
        }

        function drawVariableResistor(x, y, width, height) {
            const rectX = x - width / 2;
            const rectY = y - height / 2;
            ctx.beginPath();
            ctx.rect(rectX, rectY, width, height);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(rectX - 5, rectY + height + 5);
            ctx.lineTo(rectX + width + 5, rectY - 5);
            ctx.stroke();
        }

        function drawIce(funnelTopX, funnelTopY, funnelTopWidth, funnelBottomX, funnelBottomY, funnelBottomWidth, heaterX, heaterY, heaterWidth, heaterHeight) {
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(funnelTopX, funnelTopY);
            ctx.lineTo(funnelTopX + funnelTopWidth, funnelTopY);
            ctx.lineTo(funnelBottomX + funnelBottomWidth, funnelBottomY);
            ctx.lineTo(funnelBottomX, funnelBottomY);
            ctx.closePath();
            ctx.clip(); // Clip to the inside of the funnel

            const heaterLeft = heaterX - heaterWidth / 2;
            const heaterRight = heaterX + heaterWidth / 2;
            const heaterTop = heaterY;
            const heaterBottom = heaterY + heaterHeight;

            for (let i = 0; i < 600; i++) {
                const x = Math.random() * funnelTopWidth + funnelTopX;
                const y = Math.random() * (funnelBottomY - funnelTopY) + funnelTopY;
                
                // Check if the point is within the heater area
                if (x > heaterLeft - 5 && x < heaterRight + 5 && y > heaterTop - 5 && y < heaterBottom + 5) {
                    continue; // Skip drawing ice inside the heater
                }

                const length = Math.random() * 5 + 2;
                const angle = Math.random() * Math.PI * 2;
                ctx.beginPath();
                ctx.moveTo(x, y);
                ctx.lineTo(x + length * Math.cos(angle), y + length * Math.sin(angle));
                ctx.stroke();
            }
            ctx.restore();
        }


        // --- Main Drawing ---

        // Center X coordinate
        const centerX = 280;
        
        // 1. Pan of balance
        const panY = 450;
        const panWidth = 200;
        ctx.beginPath();
        ctx.rect(centerX - panWidth/2, panY, panWidth, 8);
        ctx.moveTo(centerX, panY + 8);
        ctx.lineTo(centerX, panY + 30);
        ctx.stroke();

        // 2. Beaker
        const beakerWidth = 120;
        const beakerHeight = 90;
        const beakerBottomY = panY;
        const beakerTopY = beakerBottomY - beakerHeight;
        ctx.beginPath();
        ctx.moveTo(centerX - beakerWidth/2, beakerBottomY);
        ctx.lineTo(centerX - beakerWidth/2, beakerTopY);
        ctx.moveTo(centerX + beakerWidth/2, beakerBottomY);
        ctx.lineTo(centerX + beakerWidth/2, beakerTopY);
        ctx.moveTo(centerX - beakerWidth/2, beakerBottomY);
        ctx.quadraticCurveTo(centerX, beakerBottomY + 10, centerX + beakerWidth/2, beakerBottomY);
        ctx.stroke();

        // 3. Melted ice
        const waterLevelY = panY - 20;
        ctx.beginPath();
        ctx.moveTo(centerX - beakerWidth/2 + 1, waterLevelY);
        ctx.lineTo(centerX + beakerWidth/2 - 1, waterLevelY);
        ctx.stroke();
        // Add some wavy lines for water
        ctx.beginPath();
        ctx.moveTo(centerX - beakerWidth/2 + 10, waterLevelY-4);
        ctx.quadraticCurveTo(centerX - 20, waterLevelY-8, centerX, waterLevelY-4);
        ctx.quadraticCurveTo(centerX + 20, waterLevelY, centerX + beakerWidth/2 - 10, waterLevelY-4);
        ctx.stroke();


        // 4. Funnel
        const funnelTopWidth = 200;
        const funnelTopY = 150;
        const funnelNeckTopY = 300;
        const funnelNeckBottomY = 340;
        const funnelNeckWidth = 20;
        ctx.beginPath();
        ctx.moveTo(centerX - funnelTopWidth/2, funnelTopY);
        ctx.lineTo(centerX - funnelNeckWidth/2, funnelNeckTopY);
        ctx.lineTo(centerX - funnelNeckWidth/2, funnelNeckBottomY);
        ctx.moveTo(centerX + funnelNeckWidth/2, funnelNeckBottomY);
        ctx.lineTo(centerX + funnelNeckWidth/2, funnelNeckTopY);
        ctx.lineTo(centerX + funnelTopWidth/2, funnelTopY);
        ctx.stroke();

        // 5. Heater
        const heaterWidth = 40;
        const heaterHeight = 80;
        const heaterTopY = 200;
        ctx.beginPath();
        ctx.rect(centerX - heaterWidth/2, heaterTopY, heaterWidth, heaterHeight);
        ctx.stroke();

        // 6. Ice
        drawIce(centerX - funnelTopWidth/2, funnelTopY, funnelTopWidth, centerX-funnelNeckWidth/2, funnelNeckTopY, funnelNeckWidth, centerX, heaterTopY, heaterWidth, heaterHeight);
        
        // 7. Electrical Circuit
        ctx.lineWidth = 1;
        
        // Wires from heater
        const wireTopY = 80;
        const wireBottomY = 140;
        const wireStartX = 380;
        const wireEndX = 560;

        ctx.beginPath();
        // Top wire
        ctx.moveTo(centerX - 10, heaterTopY);
        ctx.lineTo(centerX - 10, wireTopY);
        ctx.lineTo(wireStartX, wireTopY);
        
        // Bottom wire
        ctx.moveTo(centerX + 10, heaterTopY);
        ctx.lineTo(centerX + 10, wireBottomY);
        ctx.lineTo(wireStartX, wireBottomY);
        ctx.stroke();
        
        // Voltmeter (V)
        const voltmeterX = wireStartX + 30;
        drawCircleInstrument(voltmeterX, (wireTopY + wireBottomY) / 2, 18, 'V');
        ctx.beginPath();
        ctx.moveTo(voltmeterX, wireTopY);
        ctx.lineTo(voltmeterX, (wireTopY + wireBottomY) / 2 - 18);
        ctx.moveTo(voltmeterX, wireBottomY);
        ctx.lineTo(voltmeterX, (wireTopY + wireBottomY) / 2 + 18);
        ctx.stroke();
        
        // Top line with Ammeter
        const ammeterX = 460;
        ctx.beginPath();
        ctx.moveTo(wireStartX, wireTopY);
        ctx.lineTo(ammeterX - 18, wireTopY);
        ctx.moveTo(ammeterX + 18, wireTopY);
        ctx.lineTo(wireEndX, wireTopY);
        ctx.stroke();
        drawCircleInstrument(ammeterX, wireTopY, 18, 'A');

        // Bottom line with Variable Resistor
        const resistorX = 490;
        ctx.beginPath();
        ctx.moveTo(wireStartX, wireBottomY);
        ctx.lineTo(resistorX - 35, wireBottomY);
        ctx.moveTo(resistorX + 35, wireBottomY);
        ctx.lineTo(wireEndX, wireBottomY);
        ctx.stroke();
        drawVariableResistor(resistorX, wireBottomY, 60, 20);
        
        // Terminals
        ctx.textAlign = 'center';
        ctx.beginPath();
        ctx.arc(wireEndX, wireTopY, 5, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillText('+', wireEndX + 15, wireTopY);

        ctx.beginPath();
        ctx.arc(wireEndX, wireBottomY, 5, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.fillText('−', wireEndX + 15, wireBottomY);

        // --- Labels ---
        ctx.lineWidth = 1.5;
        ctx.fillStyle = 'black';
        ctx.textAlign = 'left';

        // Ice
        drawLabel('ice', 130, 180, 180, 180);
        // Heater
        drawLabel('heater', 130, 250, 250, 240);
        // Pan of balance
        drawLabel('pan of', 130, 455, 180, 454);
        ctx.fillText('balance', 130, 470);
        
        // Beaker
        drawLabelRight('beaker', 450, 350, 345, 360);
        // Melted ice
        drawLabelRight('melted ice', 450, 430, 335, 430);

        // Figure Caption
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 3.1', canvas.width / 2, 505);

    </script>
</body>
</html>